<template>
  <div class="classs-container">
    <!-- 搜索 -->
    <div class="search">
      <el-form
        :inline="true"
        :model="page"
        class="demo-form-inline"
        size="small"
        ref="Form"
      >
        <el-form-item>
          <el-input
            v-model="page.student_name"
            placeholder="学生名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="page.subject_id"
            placeholder="归属学科"
            clearable
            @focus="subjectClass"
          >
            <el-option
              v-for="item in subject"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="page.student_state" placeholder="账号状态">
            <el-option label="待审核" value="1"></el-option>
            <el-option label="正常" value="2"></el-option>
            <el-option label="禁用" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="studentInfo">搜索</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" plain @click="editStudent('')"
        >增加学员</el-button
      >
      <el-button type="warning" plain @click="daoru">批量导入</el-button>
    </div>
    <!-- 按钮 -->
    <el-row class="anniu" v-show="multipleSelection.length">
      <el-button type="success" size="small" @click="checks(1)"
        >批量启用</el-button
      >
      <el-button type="warning" size="small" @click="checks(2)"
        >批量禁用</el-button
      >
      <el-button type="danger" size="small" @click="checks(3)"
        >批量删除</el-button
      >
    </el-row>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="序号" type="index" width="100"> </el-table-column>
      <el-table-column prop="student_name" label="学生姓名" width="100">
      </el-table-column>
      <el-table-column prop="student_phone" label="手机号" width="100">
      </el-table-column>
      <el-table-column prop="class_name" label="班级名称" width="100">
      </el-table-column>
      <el-table-column prop="subject_name" label="学科名称" width="100">
      </el-table-column>
      <el-table-column label="性别" width="80">
        <template slot-scope="{ row }">
          {{ row.student_sex === 1 ? "男" : "女" }}</template
        >
      </el-table-column>
      <el-table-column label="状态" width="90">
        <template slot-scope="{ row }">
          <el-tag type="success" v-if="row.student_state === 2"> 正常 </el-tag>
          <el-tag type="info" v-if="row.student_state === 3"> 禁用 </el-tag>
          <el-tag type="warning" v-if="row.student_state === 1">
            待审核
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="创建人" width="100">
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" width="160">
      </el-table-column>
      <el-table-column prop="name" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            circle
            @click="editStudent(scope.row.id)"
          ></el-button>
          <el-button
            size="small"
            fixed
            type="danger"
            icon="el-icon-delete"
            circle
            @click.native.prevent="delStudent(scope.row.id)"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-row type="flex" justify="end" style="height: 60px" class="fenye">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size.sync="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </el-row>
    <!-- 编辑的弹出框组件 -->
    <EditStudent ref="edits" @update="studentInfo" />
    <!-- 批量导入 -->
     <DialogImport ref="dialog-import" @update="studentInfo" />
  </div>
</template>

<script>
import { studentInfo, delStudent, piLiang } from "@/api/student";
import { subjectClass, getClass } from "@/api/class";

import EditStudent from "./components/editStudent.vue";
import DialogImport from "./components/dialog-import.vue";

export default {
  name: "Student",
  components: { EditStudent, DialogImport },
  props: {},
  data() {
    return {
      multipleSelection: [],
      subject: [],
      page: {
        student_name: "",
        student_state: "",
        subject_id: "",
        page: 1,
        total: 0,
        limit: 10, // 页面显示条数
      },
      list: [],

      subject: [], // 学科
      classs: [], // 班级
    };
  },
  computed: {},
  watch: {},
  created() {
    this.studentInfo();
    this.subjectClass();
    this.className();
  },
  mounted() {},
  methods: {
    // 获取学生信息列表
    async studentInfo() {
      const { list, page, total } = await studentInfo(this.page);
      this.page.page = page;
      this.page.total = total;
      this.list = list;
      console.log("学生信息", this.list);
    },
    // 删除学生信息
    delStudent(id) {
      this.$confirm("确定删除吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await delStudent({ id: [id] });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          // 列表更新
          this.studentInfo();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 重置
    resetForm() {
      this.page.student_name = "";
      this.page.student_state = "";
      this.page.subject_id = "";
      this.studentInfo();
    },
    // 勾选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log("勾选框", this.multipleSelection);
    },
    // 页码
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.limit = val;
      this.studentInfo();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.page = val;
      this.studentInfo();
    },
    // 编辑
    async editStudent(id) {
      await this.$refs.edits.studentShow(id);
      this.$refs.edits.showDialogEdit = true;
      console.log("id", id);
    },
    // 学科下拉菜单回显
    async subjectClass() {
      this.subject = await subjectClass();
      console.log("学科回显", this.subject);
    },
    // 归属班级菜单回显
    async className() {
      const { list } = await getClass(this.page);
      this.classs = list;
      console.log("班级", this.classs);
    },
    // 批量处理
    checks(val) {
      let ids = [];
      this.multipleSelection.forEach((item) => {
        ids.push(item.id);
      });
      console.log(ids);
      if (val === 1) {
        // 批量启用
        console.log("批量启用");
        this.$confirm(
          "确定批量启用这" + this.multipleSelection.length + "条数据吗?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(async () => {
            await piLiang({ id: ids, status: 2 });
            this.$message({
              type: "success",
              message: "启用成功!",
            });
            // 列表更新
            this.studentInfo();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      } else if (val === 2) {
        // 批量禁用
        console.log("批量禁用");
        this.$confirm(
          "确定批量禁用这" + this.multipleSelection.length + "条数据吗?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(async () => {
            await piLiang({ id: ids, status: 3 });

            this.$message({
              type: "success",
              message: "禁用成功!",
            });
            // 列表更新
            this.studentInfo();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      } else {
        // 批量删除
        console.log("批量删除");
        this.$confirm(
          "确定批量删除这" +
            this.multipleSelection.length +
            "条数据吗?此操作不可恢复",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "error",
          }
        )
          .then(async () => {
            await delStudent({ id: ids });
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            // 列表更新
            this.studentInfo();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      }
    },
    // 批量导入
    daoru() {
      this.$refs["dialog-import"].showDialog = true;
      this.$refs["dialog-import"].isUpload = true;
    },
  },
};
</script>
<style lang='scss' scoped>
.classs-container {
  background-color: #fff;
  padding: 16px;
  .search {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  ::v-deep .el-table th {
    background-color: #fafafa;
    color: #646464;
    text-align: center;
  }
  ::v-deep .el-table td {
    text-align: center;
  }
  .el-tag {
    margin: 5px;
  }
  ::v-deep .el-table .demo-table-expand {
    text-align: left;
    .el-form-item__label {
      width: 120px;
      color: #99a9bf;
      font-weight: 400;
    }
    .el-col-6,
    .el-col-18 {
      height: 40px !important;
    }
  }
  .fenye {
    margin-top: 20px;
  }
  .anniu {
    margin-bottom: 20px;
  }
}
</style>